<template>
  <div v-loading="loading" class="basic-page">
    <!-- 头部标题 -->
    <div class='basic-header'>
      <span class='basic-header-title'>企微配置</span>
    </div>
    <!-- 主体内容 -->
    <div class="basic-body">
      <div class="basic-main-box">
        <div class="basic-main-box-title">
          企微信息
        </div>
        <div class="basic-main-content">
          <div class="qrCode-box">
            <div class="qrCode-box-title">
              <span class="sub-title">
                二维码
              </span>
            </div>
            <div class="qrCode-wrap">
              <div class="qrCode" @click='enlarge'>
                <img :src="qrUrl" alt="" >
                <div class="submit-btn-wrap"  @click.stop='() => {}'>
                  <!-- <div class='submit-btn' size='samll'>本地上传</div> -->
                  <div class="upload_title">
                    本地上传
                  </div>
                  <input class='submit-file' ref='qrFile' accept='image/*' type="file" @change.stop='imgUpload' name="" id="">
                </div>
              </div>
            </div>
          </div>
          <div class="edit-icon" v-show='!isEdit' @click='changeEditStatus'></div>
          <div class="basic-set-box-top">
            <el-form  label-width="110px" :model="companyInfo">
              <el-form-item label="企业名称：" class='form-info-item'>
                <el-input v-show='isEdit' placeholder="请输入企业名称" :maxlength='60' class='input-item short' v-model.trim="companyInfo.corpName"></el-input>
                <span class="showTitle" v-show='!isEdit'>
                  {{companyInfo.corpName}}
                </span>
              </el-form-item>
            </el-form>
          </div>
          <div class="basic-set-box-bottom">
            <!-- 基本信息 -->
            <el-form  label-width="110px" :model="configInfo">
              <el-form-item label="企业Id(CorpId)："  class='form-info-item' >
                <el-input v-show='isEdit' placeholder="请输入CorpId" class='input-item short' v-model.trim="configInfo.corpId"></el-input>
                <span class="showTitle" v-show='!isEdit'>
                  {{configInfo.corpId}}
                </span>
              </el-form-item>
              <el-form-item label="客户联系Secret："  class='form-info-item' >
                <el-input v-show='isEdit' placeholder="请输入客户联系Secret" class='input-item short' v-model.trim="customerConfig.secret"></el-input>
                <span class="showTitle" v-show='!isEdit'>
                  {{customerConfig.secret}}
                </span>
              </el-form-item>
              <el-form-item label="通讯录Secret："  class='form-info-item' >
                <el-input v-show='isEdit' placeholder="请输入通讯录Secret" class='input-item short' v-model.trim="contactConfig.secret"></el-input>
                <span class="showTitle" v-show='!isEdit'>
                  {{contactConfig.secret}}
                </span>
              </el-form-item>
            </el-form>
            <!-- 默认隐藏信息 -->
            <div class='basic-setting-others' v-show='showOtherConfig'>
              <!-- 客户联系接受事件服务器配置 -->
              <section class='edit-part' >
                <div class='part-title'>客户联系接受事件服务器配置</div>
                <ul class='part-content'>
                  <li class='part-item'>
                    <span class='part-item-label'>URL</span>
                    <input class='part-item-input' type="text" v-model.trim='customerConfig.url' placeholder="请配置" :disabled='true' >
                    <span class='part-item-btn client-URL' @click='copy("client-URL")'>复制</span>
                  </li>
                  <li class='part-item'>
                    <span class='part-item-label'>Token</span>
                    <input class='part-item-input' type="text" v-model.trim='customerConfig.token' placeholder="请配置" :disabled='!isEdit'>
                    <span class='part-item-btn client-Token' @click='copy("client-Token")'>复制</span>
                    <!-- <span class='part-item-btn' @click='reCreate("client-token")' v-show='isEdit'>重新生成</span> -->
                  </li>
                  <li class='part-item'>
                    <span class='part-item-label'>EncodingAESKey</span>
                    <input class='part-item-input' type="text" v-model.trim='customerConfig.aesKey' placeholder="请配置" :disabled='!isEdit'>
                    <span class='part-item-btn client-EncodingAESKey' @click='copy("client-EncodingAESKey")'>复制</span>
                    <!-- <span class='part-item-btn' @click='reCreate("client-aesKey")' v-show='isEdit'>重新生成</span> -->
                  </li>
                </ul>
              </section>
              <!-- 通讯录接受事件服务器配置 -->
              <section class='edit-part' >
                <div class='part-title'>通讯录接受事件服务器配置</div>
                <ul class='part-content'>
                  <li class='part-item'>
                    <span class='part-item-label'>URL</span>
                    <input class='part-item-input' type="text" v-model.trim='contactConfig.url' placeholder="请配置" :disabled='true' >
                    <span class='part-item-btn connect-URL' @click='copy("connect-URL")'>复制</span>
                  </li>
                  <li class='part-item'>
                    <span class='part-item-label'>Token</span>
                    <input class='part-item-input' type="text" v-model.trim='contactConfig.token' placeholder="请配置" :disabled='!isEdit'>
                    <span class='part-item-btn connect-Token' @click='copy("connect-Token")'>复制</span>
                    <!-- <span class='part-item-btn' @click='reCreate("connect-token")' v-show='isEdit'>重新生成</span> -->
                  </li>
                  <li class='part-item'>
                    <span class='part-item-label'>EncodingAESKey</span>
                    <input class='part-item-input' type="text" v-model.trim='contactConfig.aesKey' placeholder="请配置" :disabled='!isEdit'>
                    <span class='part-item-btn connect-EncodingAESKey' @click='copy("connect-EncodingAESKey")'>复制</span>
                    <!-- <span class='part-item-btn' @click='reCreate("connect-aesKey")' v-show='isEdit'>重新生成</span> -->
                  </li>
                </ul>
              </section>
            </div>
            <!-- 显隐隐藏信息按钮 -->
            <div class='edit-toggle-wrapper'>
              <div class='toggle-btn' @click='toggleShowOtherConfig'>
                {{showOtherConfig ? '收起': '更多'}}信息
                <span class='iconfont' :class='{collapse:!showOtherConfig}'>&#xe601;</span>
              </div>
            </div>
            <div class="btn-group" v-show='isEdit'>
              <div
                class="saveBtn"
                @click='updateConfig()'>保存</div>
              <div
                class="cancelBtn"
                @click='cancelEdit()'>取消</div>
              <div
                class="deleteBtn"
                @click='deleteEnterprise()'>解绑</div>
            </div>
          </div>
        </div>
        <!-- <div class="qrCode-box">
          <div class="qrCode-box-title">
            <span class="main-title">
              二维码
            </span>
            <span class="sub-title">
              点击可放大查看
            </span>
          </div>
          <div class="qrCode-wrap">
            <div class="qrCode" @click='enlarge'>
              <img :src="qrUrl" alt="">
            </div>
            <div class="submit-btn-wrap"  >
              <div class='submit-btn' size='samll'>本地上传</div>
              <input class='submit-file' ref='qrFile' accept='image/*' type="file" @change='imgUpload' name="" id="">
            </div>
          </div>
        </div> -->
        <div class="control-box">
          <div class="control-box-left">
            <div class="control-box-left-title">
              通讯录组织架构：同步至腾讯企业号平台
            </div>
            <div class="control-box-left-sub">
              启用后，通讯录的组织架构信息将会完全同步至腾讯企业号平台。
            </div>
          </div>
          <div class="control-box-right">
            <div class="up-mask" @click='updateOriginConfig'></div>
            <el-switch  v-model='hasSyncOrigin'></el-switch>
          </div>
        </div>
        <div class="control-box">
          <div class="control-box-left">
            <div class="control-box-left-title">
              通讯录成员信息：同步至腾讯企业号平台
            </div>
            <div class="control-box-left-sub">
              启用后，通讯录成员的邮箱、手机、职位信息将会同步至腾讯企业号平台，方便使用企业号会话。
            </div>
          </div>
          <div class="control-box-right">
            <el-switch  v-model='hasSyncUser'></el-switch>
            <div class="up-mask" @click='updateUserConfig'></div>
          </div>
        </div>
        <div class='control-box'>
          <div class="control-box-left">
            <div class="control-box-left-title">
              通讯录组织同步
            </div>
            <div class="control-box-left-sub">
              启用后，通讯录的组织架构信息将会从腾讯企业号平台同步至本平台。
            </div>
          </div>
          <div class="control-box-right">
            <div class='item-btn' @click='startSyncDept'>同步</div>
          </div>
        </div>
        <div class='control-box'>
          <div class="control-box-left">
            <div class="control-box-left-title">
              通讯录成员同步
            </div>
            <div class="control-box-left-sub">
              启用后，通讯录成员的邮箱、手机、职位信息将会从腾讯企业号平台同步至本平台，方便使用企业号会话。
            </div>
          </div>
          <div class="control-box-right">
            <div class='item-btn' @click='startSyncStaff'>同步</div>
          </div>
        </div>
      </div>
      <el-dialog class='chain-visible large' :visible.sync="qrDialogVisible">
        <img width="100%" :src="qrUrl" alt="">
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ClipboardJS from 'clipboard'
import qiniuUploader from 'assets/upload/upload.js'
export default {
  data () {
    return {
      companyInfo: {
        corpName: '罗氏企业'
        // introduction: '罗氏企业简介',
        // corpLogo: 'https://dev-pro.oss.yuemia.com/202103041925210049.png'
      },
      configInfo: {
        corpId: 'wx9cba09efa62003cc',
        contactSecret: '',
        customerSecret: ''
      },
      contactConfig: {
        url: '',
        token: '',
        aesKey: '',
        secret: ''
      },
      customerConfig: {
        url: '',
        token: '',
        aesKey: '',
        secret: ''
      },
      qrUrl: 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQED8jwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyWjBGako0TG9mNkYxMDAwMGcwN1UAAgQFlcRfAwQAAAAA',
      qrDialogVisible: false,
      fileList: [],
      hasSyncUser: false,
      hasSyncOrigin: false,
      loading: false,
      isEdit: false,
      dialogImageUrl: '',
      dialogVisible: false,
      lock: false,
      showOtherConfig: false
    }
  },
  filters: {
  },
  methods: {
    toggleShowOtherConfig () {
      this.showOtherConfig = !this.showOtherConfig
    },
    copy (type) {
      let copyText = ''
      switch (type) {
        case 'connect-URL': copyText = this.contactConfig.url; break
        case 'connect-Token': copyText = this.contactConfig.token; break
        case 'connect-EncodingAESKey': copyText = this.contactConfig.aesKey; break
        case 'client-URL': copyText = this.customerConfig.url; break
        case 'client-Token': copyText = this.customerConfig.token; break
        case 'client-EncodingAESKey': copyText = this.customerConfig.aesKey; break
      }
      this.clipboard = new ClipboardJS(`.${type}`, {
        text: function (trigger) {
          return copyText
        }
      })
      this.$message({
        message: '复制成功',
        type: 'success'
      })
    },
    startSyncDept () {
      if (!this.hasSyncOrigin) {
        this.$message({
          type: 'warning',
          message: '请先开启通讯录组织架构同步功能'
        })
        return false
      }
      this.confirm({
        title: '确认进行组织同步？同步一般需要几分钟到十几分钟不等。'
      }).then(() => {
        let url = `${this.SERVICE_CP}/contacts/sync`
        this.posts(url).then(res => {
          if (res.data.code === 200) {
            this.showSucc(res.data.message)
          }
          this.loading = false
        }).catch(e => {
          this.loading = false
          this.handleError(e)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作已取消'
        })
      })
    },
    startSyncStaff () {
      if (!this.hasSyncUser) {
        this.$message({
          type: 'warning',
          message: '请先开启通讯录成员信息同步功能'
        })
        return false
      }
      this.confirm({
        title: '确认进行成员同步？同步一般需要几分钟到十几分钟不等。'
      }).then(() => {
        let url = `${this.SERVICE_CP}/contacts/sync/user`
        this.posts(url).then(res => {
          if (res.data.code === 200) {
            this.showSucc(res.data.message)
          }
          this.loading = false
        }).catch(e => {
          this.loading = false
          this.handleError(e)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作已取消'
        })
      })
    },
    imgUpload () {
      if (this.$refs.qrFile.files.length) {
        let file = this.$refs.qrFile.files[0]
        qiniuUploader.createQiniuUploader({
          file: file,
          nextCb: null,
          errorCb: null,
          completeCb: (res, baseConf) => {
            this.qrUrl = `${baseConf.domain}/${res.key}`
            this.updateConfig('img')
          }
        })
        this.$refs.qrFile.value = ''
      }
    },
    updateOriginConfig () {
      let title = this.hasSyncOrigin ? '确定要取消同步用户通讯录组织架构？' : '确定要同步用户通讯录组织架构'
      this.confirm({title}).then(() => {
        this.hasSyncOrigin = !this.hasSyncOrigin
        this.updateConfig()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作已取消'
        })
      })
    },
    updateUserConfig () {
      let title = this.hasSyncUser ? '确定要取消同步用户通讯录成员信息？' : '确定要同步用户通讯录成员信息'
      this.confirm({title}).then(() => {
        this.hasSyncUser = !this.hasSyncUser
        this.updateConfig()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作已取消'
        })
      })
    },
    updateConfig (type) {
      if (!this.companyInfo.corpName) {
        this.showWarning('企业名称不能为空')
        return
      }
      if (this.lock) {
        return
      }
      this.lock = true
      let url = `${this.SERVICE_CP}/save`
      let param = {
        baseInfo: {
          corpName: this.companyInfo.corpName,
          // introduction: this.companyInfo.introduction,
          // corpLogo: this.companyInfo.corpLogo,
          corpQrcode: this.qrUrl,
          hasSyncUser: this.hasSyncUser,
          hasSyncOrigin: this.hasSyncOrigin,
          corpId: this.configInfo.corpId
          // contactsLimit: this.configInfo.contactsLimit
          // subNum: this.configInfo.subNum
        },
        contactConfig: {
          // secret: this.configInfo.contactSecret
          ...this.contactConfig
        },
        customerConfig: {
          // secret: this.configInfo.customerSecret
          ...this.customerConfig
        }
      }
      this.posts(url, param).then(res => {
        this.lock = false
        if (res.data.code === 200) {
          if (type === 'img') {
            this.showSucc('修改成功')
            return
          }
          this.showSucc(res.data.message)
          if (this.isEdit) {
            this.isEdit = !this.isEdit
          }
        }
        this.getConfigInfo()
      })
    },
    handleRemove (file, fileList) {
      this.logoPath = ''
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleBeforeUpload (file) {
      let size = Math.floor(file.size / 1024)
      if (size > 1024 * 20) {
        this.$message({
          message: '建议使用120*120，2M以内的jpg、jpeg、png图片',
          type: 'warning'
        })
        return false
      }
    },
    handleFile (data) {
      var file = data.file
      this.fileList = []
      qiniuUploader.createQiniuUploader({
        file: file,
        nextCb: null,
        errorCb: null,
        completeCb: (res, baseConf) => {
          // this.logoPath = `${baseConf.domain}/${res.key}`
          // this.fileList.push({name: '', url: this.logoPath})
          let logoPath = `${baseConf.domain}/${res.key}`
          this.companyInfo.corpLogo = `${baseConf.domain}/${res.key}`
          this.fileList = [{name: '', url: logoPath}]
        }
      })
    },
    getConfigInfo () {
      let url = `${this.SERVICE_CP}`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          let baseInfo = data.baseInfo
          for (let prop in this.configInfo) {
            this.configInfo[prop] = baseInfo[prop]
          }
          for (let prop in this.companyInfo) {
            this.companyInfo[prop] = baseInfo[prop]
          }
          // this.configInfo.customerSecret = data.customerConfig && data.customerConfig.secret
          // this.configInfo.contactSecret = data.contactConfig && data.contactConfig.secret
          this.qrUrl = baseInfo.corpQrcode
          this.hasSyncUser = baseInfo.hasSyncUser
          this.hasSyncOrigin = baseInfo.hasSyncOrigin
          this.fileList = [{name: '', url: this.companyInfo.corpLogo}]
          // 获取客户和通讯录相关配置
          let customerConfig = data.customerConfig || {}
          this.assignKey(this.customerConfig, customerConfig)
          let contactConfig = data.contactConfig || {}
          this.assignKey(this.contactConfig, contactConfig)
        }
      })
    },
    changeEditStatus () {
      this.isEdit = !this.isEdit
    },
    cancelEdit () {
      this.isEdit = false
    },
    enlarge () {
      this.qrDialogVisible = true
    },
    // 解绑企业微信
    deleteEnterprise () {
      let url = `${this.SERVICE_CP}/uninstall`
      this.posts(url).then(res => {
        if (res.data.code === 200) {
          this.showSucc('解绑企业微信成功')
          // 现在是只能授权一个企业号删除之后直接去授权页;当为多个企业号时删除当前的剩余列表的第一个
          this.replaceRoute({name: 'platformAuth', query: {platformType: 'enterprise'}})
        }
      }).catch(err => {
        this.handleError(err)
      })
    },
    // 先判断是否接入企业微信，没接入返回接入页
    fetchCheck () {
      let url = `${this.SERVICE_CP}/check`
      this.get(url).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          if (data && data.corpId) {
            this.getConfigInfo()
          } else {
            this.showWarning('请先绑定企业微信')
            this.replaceRoute({name: 'platformAuth', query: {platformType: 'enterprise'}})
          }
        } else {
          this.showWarning('请先绑定企业微信')
          this.replaceRoute({name: 'platformAuth', query: {platformType: 'enterprise'}})
        }
      }).catch(e => {
        this.handleError(e)
      })
    }
  },
  created () {
    // this.fileList.push({
    //   name: '',
    //   url: this.companyInfo.corpLogo
    // })
    this.fetchCheck()
  }
}
</script>

<style lang="stylus" scoped>
.chain-visible
  >>> .el-dialog
    width 300px
    height 300px
    min-width 300px
    min-height 300px
.chain-visible.large
  >>> .el-dialog
    width 400px
    height 400px
    min-width 400px
    min-height 400px
.system-item
  display flex
  height 60px
  >>>.el-upload-list__item,>>>.el-upload.el-upload--picture-card,>>>.el-upload-list__item-thumbnail
    width 60px
    height 60px
    margin-bottom 0!important
  >>> .el-icon-camera-solid
    line-height 60px
  >>> .el-checkbox-group,.el-switch
    margin-left 60px
  >>>.el-upload.el-upload--picture-card
    line-height 60px
  >>>.el-upload-list__item-preview
    font-size 12px
    margin-left 10px
  >>>.el-upload-list__item-delete
    font-size 12px
    margin-left 10px
    margin-right 10px
  .chain-logo-choose
    display inline-block
.btn-group
  display flex
  margin-top 10px
  // margin-left 108px
.saveBtn
  width: 96px;
  height: 36px;
  line-height 36px
  text-align center
  background: #4C84FF;
  border-radius: 4px;
  font-size 16px
  color #fff
  cursor pointer
  margin-right 30px
.cancelBtn
  width: 96px;
  height: 36px;
  border: 1px solid #E7E7E8
  line-height 34px
  text-align center
  background: #fff;
  border-radius: 4px;
  font-size 16px
  color #22242F
  cursor pointer
  margin-right 30px
.deleteBtn
  width: 96px;
  height: 36px;
  line-height 36px
  text-align center
  background: #ff4949;
  border-radius: 4px;
  font-size 16px
  color #fff
  cursor pointer
.submit-btn-wrap
  width 100%
  display none
  height 120px
  position absolute
  top 0
  left 0
  z-index 100
  background rgba(0,0,0,.3)
  cursor pointer
  .upload_title
    position absolute
    bottom 10px
    width 100%
    text-align center
    margin 0 auto
    color #fff
.submit-file
  position absolute
  width 100%
  height 100%
  z-index 100
  opacity 0
  top 0
.submit-btn
  width 88px
  height 36px
  background #F6F6F9
  border-radius 4px
  border 1px solid #EAEDF7
  color #5E5E66
  cursor pointer
  font-size 14px
  line-height 36px
  text-align center
.qrCode-wrap
  display inline-block
  position relative
  // justify-content space-between
  // align-items center
.form-info-item
  height 40px
.upload-btn-wrap
  display inline-block
  position relative
  width 30px
  height 14px
  cursor pointer
  margin-left 15px
.upload
  width 30px
  height 14px
  font-size 14px
  color #4C84FF
  // display inline-block
.control-box
  width 100%
  height 74px
  padding 13px 0 10px
  box-sizing border-box
  display flex
  box-sizing border-box
  align-items center
  border-top 1px solid #EAEDF7
  justify-content space-between
  &:last-child
    border-bottom 1px solid #EAEDF7
  .control-box-right
    position relative
    .up-mask
      position absolute
      top 0
      left 0
      z-index 100
      width 100%
      height 100%
      cursor pointer
    .item-btn
      flex none
      margin-left 20px
      width: 88px;
      height: 36px;
      line-height 36px
      background: #F6F6F9;
      border-radius: 4px;
      border: 1px solid #EAEDF7;
      cursor pointer
      text-align center
      font-size: 12px;
      color: #5E5E66;
      letter-spacing 1px
  .control-box-left-title
    font-size 16px
    color #22242F
    font-weight 600
    margin-bottom 12px
  .control-box-left-sub
    font-size 12px
    color #5E5E66
.qrCode-box
  // margin-top 28px
  // margin-bottom 18px
  position absolute
  top 10px
  left 585px
  z-index 100
  .qrCode-box-title
    margin-bottom 15px
    .main-title
      font-size 16px
      color #22242F
      font-weight 600
    .sub-title
      // margin-left 15px
      color #888B9C
      font-size 12px
  .qrCode
    width 120px
    position relative
    height 120px
    &.edit
      &:hover
        .submit-btn-wrap
          display none
    &:hover
      .submit-btn-wrap
        display inline-block
    img
      width 100%
      height 100%
.showTitle
  font-size 12px
.logoImg
  width 60px
  height 60px
  border-radius 4px
.basic-main-box-title
  font-size: 16px;
  color: #22242F;
  line-height: 18px;
  font-weight 600
  margin-bottom 4px
  margin-top 10px
  &.basic-main-item-title
    margin-top 6px
.basic-main-box
  padding 10px 20px
  width 100%
  box-sizing border-box
  .basic-main-content
    // min-height 350px
    width 100%
    padding 20px 31px
    border-radius 8px
    box-sizing border-box
    position relative
    background-color rgba(239,240,246, 0.39)
    margin-bottom 20px
    .qrCode-box
    >>> .el-form-item
      margin-bottom 4px
    .edit-icon
      width 30px
      height 30px
      background url('~assets/img/ic_bianji_4@2x.png') no-repeat center/30px 30px
      position absolute
      top 20px
      z-index 100
      right 30px
      cursor pointer
    .basic-set-box-bottom
      .basic-setting-others
        margin 20px 0
        .edit-part
          margin-bottom 20px
          &:last-of-type
            margin-bottom 0
          .part-title
            font-size: 14px;
            color: #22242F;
            font-weight 700
            margin-bottom 20px
          .part-content
            background: #FFFFFF;
            border-radius: 12px;
            border: 1px solid #DDDDDD;
            padding 20px 30px
            .part-item
              display flex
              margin-bottom 12px
              &:last-child
                margin-bottom 0
              .part-item-label
                position relative
                flex none
                width 133px
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: #5E5E66;
                padding-top 13px
              .part-item-input
                width: 517px;
                height: 36px;
                box-sizing border-box
                line-height 36px
                background: #FFFFFF;
                border-radius: 4px;
                border: 1px solid #E9EAED;
                padding 0 15px
                color: #22242F;
                font-size: 12px;
                font-family: MicrosoftYaHei;
                outline none
                &::-webkit-input-placeholder
                  color: #C5C6CD;
              .part-item-btn
                display inline-block
                margin-left 24px
                font-size: 12px;
                color: #4C84FF;
                cursor pointer
                line-height 38px
                cursor pointer
            .part-handle
              margin-top 25px
              // position: absolute;
              // top: 70px;
              // right: 40px;
              .handle-save-btn
                display inline-block
                width: 80px;
                height: 30px;
                line-height 30px
                background: #4C84FF;
                border-radius: 4px;
                text-align center
                font-size: 12px;
                color: #FFFFFF;
                cursor pointer
                border 1px solid #4C84FF;
                margin-right 10px
              .handle-edit-btn
                display inline-block
                width: 80px;
                height: 30px;
                line-height 30px
                background: #fff;
                border-radius: 4px;
                text-align center
                font-size: 12px;
                color: #4C84FF;
                cursor pointer
                border 1px solid #4C84FF;
                margin-right 10px
      .edit-toggle-wrapper
        text-align right
        .toggle-btn
          color #4c84ff
          font-size 12px
          font-weight 700
          cursor pointer
          .iconfont
            display inline-block
            margin-left 6px
            &.collapse
              transform rotate(180deg) translateY(1px)
.meterialBox
  >>> .cont-item
    display flex
    flex-direction column
.show-box
  width 471px
  height 36px
  padding 11px 15px
  box-sizing border-box
  display flex
  border-radius 4px
  align-items center
  color #5E5E66
  font-size 12px
  background-color rgb(248,249,251)
.input-item
  width 471px
  height 36px
  max-width 410px
  &.short
    max-width 340px
  >>> .el-input__inner
    width 100%
    max-width 100%
    padding 11px 15px
    box-sizing border-box
.qrDialog
  >>> .el-dialog
    margin-top 10vh!important
  .qrDialog-main
    display flex
    padding 21px 47px 17px 30px
    box-sizing border-box
    .qrDialog-main-left
      display flex
      width 80px
      margin-right 31px
      flex-direction column
      img
        width 80px
        height 80px
      .download
        text-align center
        margin-top 4px
        color #4C84FF
        font-size 14px
  >>> .el-dialog__body
    padding 0
  >>> .el-dialog__header
    height 64px
    padding 24px 30px
    font-size 16px
    color #22242F
    box-sizing border-box
    border-bottom 1px solid #ECEDF2
  >>> .el-dialog__footer
    border-top 1px solid #ECEDF2
    height 60px
    padding 0
    display flex
    align-items center
    justify-content flex-end
.article-info
  display flex
  height 70px
  align-items center
  .article-info-cover
    height 60px
    width 60px
    margin-right 12px
    background-size cover
    background-repeat no-repeat
    background-position center
    border-radius 4px
  .article-info-title
    font-size 14px
    color #5E5E66
// .basic-page
//   >>> .el-button
//     padding 0
//     margin-right 40px
//   >>> .el-button--primary
//     width 150px
//     height 36px
//     line-height 0
//   >>> .el-input--medium
//     width 255px
//   .el-select >>> .el-input__inner
//     width 170px
.basic-page
  scroll()
  width 100%
  height 100%
  display flex
  flex-direction column
  background #fff
  // 头部
  .basic-header
    width 100%
    flex none
    padding-bottom: 20px;
    padding-top: 13px;
    font-weight 700
    font-size 12px
    background #fff
    .basic-header-title
      display inline-block
  // 主体内容
  .basic-body
    box-sizing border-box
    background #f2f2f6
    border-radius 6px
    padding 10px
    flex-shrink 1
    .basic-main-box
      background #fff
      border-radius 6px
    .top
      between()
      width 100%
      background #fff
      padding 15px 20px
      border-radius 6px
      margin-bottom 10px
      box-sizing border-box
      overflow hidden
      .type_button
        margin-right 20px
      .select-input-box
        width 120px
        margin-right 10px
        >>> .el-input
          max-width 100%
          font-size 12px
          .el-input__inner
            max-width 100%
            height 30px
            padding-left 12px
            line-height 30px
            &::-webkit-input-placeholder
              font-size 12px
        >>> .el-select__caret
          line-height 30px
    .bottom
      center()
      width 100%
      padding-bottom 15px
      background #fff
      border-radius 0 0 6px 6px
    .middle
      max-height calc(100% - 127px)
      scroll()
      padding 15px 20px 0 20px
      box-sizing border-box
      background #fff
      border-radius 6px 6px 0 0
      .key-replay
        no-wrap()
.iconfont
  font-size 12px
  display inline-block
  cursor pointer
.iconfonts
  display inline-block
  color #3496FF
  cursor pointer
  &:hover
    color #FA376C
.iconfonts + .iconfonts
  margin-left 15px
// 抽屉
.demo-ruleForm
  padding-top 50px
  padding-left 90px
  .kys-wrapper
    margin-top 20px
    .key-word
      display inline-block
      >>> .el-input__inner
        width 130px
    .word-key
      display inline-block
      margin-left 10px
      >>> .el-input__inner
        width 216px
    &:first-child
      margin-top 0
    .iconfont
      display inline-block
      width 36px
      height 36px
      line-height 36px
      text-align center
      font-size 12px
      cursor pointer
</style>
